import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { TemplateComponent } from './template/template.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';
import { Demo10Component } from './demo10/demo10.component';

export const PopoverConfig = {
  location: 'Popover',
  description:
    '点击/鼠标移入元素，弹出气泡式的卡片浮层。和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。',
  description_en:
    'Click/mouseenter the element to pop up the Popover card float layer. The difference with Tooltip is that users can manipulate elements on the floating layer, so it can carry more complex content, such as links or buttons.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/popover/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '最简单的用法。支持组件、指令调用两种方式。可以配置纯文本的头部、内容和底部。',
      demoDescription_en:
        'Simplest usage. It supports two methods of component and instruction invocation. The header, content and bottom of plain text can be configured.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/popover/demo2/demo2.component',
      demoTitle: '位置',
      demoTitle_en: 'Position',
      demoDescription: '位置提供12个方向。',
      demoDescription_en: 'The location offers 12 directions.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/popover/demo3/demo3.component',
      demoTitle: '显示关闭按钮',
      demoTitle_en: 'Show Close Button',
      demoDescription: '显示气泡框关闭按钮。',
      demoDescription_en: 'Show Popover box off button.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/popover/demo4/demo4.component',
      demoTitle: '主题',
      demoTitle_en: 'Theme',
      demoDescription: '有深色和浅色两个主题。默认为浅色主题，深色主题：dark。',
      demoDescription_en: 'There are two themes in dark and light colors. The default is a light theme.',
      devDebug: true,
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/popover/demo5/demo5.component',
      demoTitle: '异步事件',
      demoTitle_en: 'Asynchronous Event',
      demoDescription: '用户可自定义按钮事件，实现异步关闭气泡卡片。',
      demoDescription_en: 'Users can customize button events to asynchronously close Popover cards.',
    },
    {
      demo: TemplateComponent,
      codePath: 'showcase/popover/template/template.component',
      demoTitle: '模板渲染',
      demoTitle_en: 'Template Render',
      demoDescription:
        'lvPopoverHeader、lvPopoverContent、lvPopoverFooter 传入 TemplateRef<any> 模板渲染。使用 lvPopoverExternalClose 控制点击 popover 外部区域时 popover 是否关闭及关闭逻辑。',
      demoDescription_en:
        'lvPopoverHeader, lvPopoverContent, lvPopoverFooter passed in the TemplateRef<any> template rendering. Use lvPopoverExternalClose to control whether the popover closes and closes the logic when clicking on the external area of the popover.',
      devDebug: true,
    },
    // {
    //   demo: Demo7Component,
    //   codePath: 'showcase/popover/demo7/demo7.component',
    //   demoTitle: '复杂模板',
    //   demoTitle_en: '',
    //   demoDescription: '',
    //   demoDescription_en: ''
    // },
    {
      demo: Demo8Component,
      codePath: 'showcase/popover/demo8/demo8.component',
      demoTitle: '自定义显示动画方式',
      demoTitle_en: 'Custom display animation',
      demoDescription: '自定义动画方式，默认为弹出效果（popup），可设置为滑出效果（slide）',
      demoDescription_en: 'Custom animation mode, the default is popup (popup), can be set to slide out (slide)',
      devDebug: true,
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/popover/demo9/demo9.component',
      demoTitle: '自定义样式',
      demoTitle_en: 'Custom style',
      demoDescription: '自定义气泡卡片样式',
      demoDescription_en: 'Custom popover style',
      devDebug: true,
    },
    {
      demo: Demo10Component,
      codePath: 'showcase/popover/demo10/demo10.component',
      demoTitle: '自定义挂载源',
      demoTitle_en: 'Custom origin',
      demoDescription: '自定义挂载的源',
      demoDescription_en: 'Custom popover origin',
    },
  ],
  useRule: [],
  useSuggestion: ['请确保挂载 lvPopover 的元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。'],
  useSuggestion_en: ['Make sure that the element that mounts lvPopover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.'],
  mApi: [
    {
      name: '组件方式',
      name_en: 'Compontent Mode',
      api: [
        {
          attribute: 'lvHeader',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片头部。`,
          description_en: `Popover card head.`,
        },
        {
          attribute: 'lvContent',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片内容。`,
          description_en: `Popover card content.`,
        },
        {
          attribute: 'lvFooter',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片底部。`,
          description_en: `Popover card bottom.`,
        },
        {
          attribute: 'lvTheme',
          type: 'string',
          default: 'light',
          description: `气泡卡片主题，可选值为 ('dark' | 'light')。`,
          description_en: `Popover card theme, optional value ('dark' | 'light').`,
          global: true,
        },
        {
          attribute: 'lvTrigger',
          type: 'string',
          default: 'hover',
          description: `触发行为，可选值为 ('hover' | 'focus' | 'click' | 'customize')。`,
          description_en: `Triggering behaviour. Value: ('hover' | 'focus' | 'click' | 'customize').`,
        },
        {
          attribute: 'lvPosition',
          type: 'string',
          default: 'top',
          description: `气泡卡片位置，可选值为 ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom')。`,
          description_en: `Popover card position, optional value ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom').`,
        },
        {
          attribute: 'lvClosable',
          type: 'boolean',
          default: 'false',
          description: `是否显示气泡卡片关闭按钮。`,
          description_en: `Whether to display the popover card close button.`,
        },
        {
          attribute: 'lvBackdrop',
          type: 'boolean',
          default: 'false',
          description: `是否显示遮罩层。`,
          description_en: ``,
        },
        {
          attribute: 'lvMaskTransparent',
          type: 'boolean',
          default: 'false',
          description: `遮罩是否透明。`,
          description_en: `Whether the mask is transparent.`,
        },
        {
          attribute: 'lvBlockPageScroll',
          type: 'boolean',
          default: 'true',
          description: `是否锁定页面滚动,使用时候需要设置lvScrollToClose为false。`,
          description_en: `Whether to lock page scrolling.,It won't work unless lvScrollToClose is set to false`,
        },
        {
          attribute: 'lvScrollToClose',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `滚动页面时，是否隐藏气泡卡片。`,
          description_en: ``,
        },
        {
          attribute: 'lvOuterClosable',
          type: 'boolean | { exclusions: HTMLElement[], includes?: string[class|id] }',
          default: 'true',
          description: `在气泡卡片外部点击时是否关闭对话框。`,
          description_en: `Whether to close the dialog when clicking outside the popover card.`,
        },
        {
          attribute: 'lvClassName',
          type: 'string',
          default: '-',
          description: `气泡卡片类名。`,
          description_en: `Popover card class name.`,
        },
        {
          attribute: 'lvOrigin',
          type: 'ElementRef',
          default: `-`,
          description: `触发弹窗开启元素`,
          description_en: `Trigger the pop-up window to open the element.`,
        },
        {
          attribute: 'lvVisible',
          type: 'boolean',
          default: 'true',
          description: `控制气泡卡片是否显示。lvTrigger为customize时才生效`,
          description_en: `Visibility of popover only effective when lvTrigger = 'customize'.`,
        },
        {
          attribute: 'lvShowArrow',
          type: 'boolean',
          default: 'true',
          description: `控制气泡卡片小三角是否显示。`,
          description_en: ``,
        },
        {
          attribute: 'lvArrowPointAtCenter',
          type: 'boolean',
          default: 'false',
          description: `小三角是否指向目标元素中心。`,
          description_en: `Indicates whether the small triangle points to the center of the target element.`,
        },
        {
          attribute: 'lvContextData',
          type: 'number | string | boolean | Array<any> | { [key: string]: any }',
          default: '-',
          description: `提示内容模板上下文数据。`,
          description_en: `Popover content template context data.`,
        },
        {
          attribute: 'lvZIndex',
          type: 'number',
          default: '-',
          description: `层级。`,
          description_en: `Levels.`,
        },
        {
          attribute: 'lvBeforeOpen',
          type: 'fn',
          default: '-',
          description: `打开气泡卡片前的回调函数，执行异步事件时promise，返回值为false可阻止打开。`,
          description_en: `Open the callback function before the popover card, perform the asynchronous event when the promise, return value is false to prevent opening.`,
        },
        {
          attribute: 'lvBeforeClose',
          type: 'fn',
          default: '-',
          description: `关闭气泡卡片前的回调函数，执行异步事件时promise，返回值为false可阻止关闭。`,
          description_en: `Close the callback function before the popover card, perform the asynchronous event when the promise, the return value is false to prevent the closure.`,
        },
      ],
      event: [
        {
          event: 'lvExternalTrigger',
          parameter: `MouseEvent`,
          description: '点击气泡卡片外部区域回调函数。',
          description_en: 'Click the popover card outer area callback function.',
        },
      ],
    },
    {
      name: '指令方式',
      name_en: 'Directive Mode',
      selector: 'lv-popover',
      snippet: `<span lv-popover lvPopoverHeader="\${1:title}" lvPopoverContent="\${2:content...}" lvPopoverFooter="\${3:Footer}">\${4:content...}</span>`,
      api: [
        {
          attribute: 'lvPopoverHeader',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片头部。`,
          description_en: `Popover card head.`,
        },
        {
          attribute: 'lvPopoverContent',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片内容。`,
          description_en: `Popover card content.`,
        },
        {
          attribute: 'lvPopoverFooter',
          type: 'string | Template',
          default: '-',
          description: `气泡卡片底部。`,
          description_en: `Popover card bottom.`,
        },
        {
          attribute: 'lvPopoverTheme',
          type: 'string',
          default: 'light',
          description: `气泡卡片主题，可选值为 ('dark' | 'light')。`,
          description_en: `Popover card theme, optional value ('dark' | 'light').`,
        },
        {
          attribute: 'lvPopoverTrigger',
          type: 'string',
          default: 'hover',
          description: `触发行为，可选值为 ('hover' | 'focus' | 'click' | 'customize')。`,
          description_en: `Triggering behaviour. Value: ('hover' | 'focus' | 'click' | 'customize').`,
        },
        {
          attribute: 'lvPopoverPosition',
          type: 'string',
          default: 'top',
          description: `气泡卡片位置，可选值为 ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom')。`,
          description_en: `Popover card position, optional value ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom').`,
        },
        {
          attribute: 'lvPopoverClosable',
          type: 'boolean',
          default: 'false',
          description: `是否显示气泡卡片关闭按钮。`,
          description_en: `Whether to display the popover card close button.`,
        },
        {
          attribute: 'lvPopoverBackdrop',
          type: 'boolean',
          default: 'false',
          description: `是否显示遮罩层。`,
          description_en: ``,
        },
        {
          attribute: 'lvPopoverMaskTransparent',
          type: 'boolean',
          default: 'false',
          description: `遮罩是否透明。`,
          description_en: `Whether the mask is transparent.`,
        },
        {
          attribute: 'lvPopoverBlockPageScroll',
          type: 'boolean',
          default: 'true',
          description: `是否锁定页面滚动。`,
          description_en: `Whether to lock page scrolling.`,
        },
        {
          attribute: 'lvPopoverScrollToClose',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `滚动页面时，是否隐藏气泡卡片。默认排除overlay元素节点。`,
          description_en: `Whether to hide popover while scrolling.`,
        },
        {
          attribute: 'lvPopoverOuterClosable',
          type: 'boolean | { exclusions: HTMLElement[], includes?: string[class|id] }',
          default: 'true',
          description: `在气泡卡片外部点击时是否关闭对话框。`,
          description_en: `Whether to close the dialog when clicking outside the popover card.`,
        },
        {
          attribute: 'lvPopoverClassName',
          type: 'string',
          default: '-',
          description: `气泡卡片类名。`,
          description_en: `Popover card class name.`,
        },
        {
          attribute: 'lvPopoverOrigin',
          type: 'ElementRef',
          default: `-`,
          description: `触发弹窗开启元素`,
          description_en: `Trigger the pop-up window to open the element.`,
        },
        {
          attribute: 'lvPopoverVisible',
          type: 'boolean',
          default: 'true',
          description: `控制气泡卡片是否显示。lvTrigger为customize时才生效`,
          description_en: `Visibility of popover only effective when lvTrigger = 'customize'.`,
        },
        {
          attribute: 'lvPopoverShowArrow',
          type: 'boolean',
          default: 'true',
          description: `控制气泡卡片小三角是否显示。`,
          description_en: ``,
        },
        {
          attribute: 'lvPopoverArrowPointAtCenter',
          type: 'boolean',
          default: 'false',
          description: `小三角是否指向目标元素中心。`,
          description_en: `Indicates whether the small triangle points to the center of the target element.`,
        },
        {
          attribute: 'lvPopoverContextData',
          type: 'number | string | boolean | Array<any> | { [key: string]: any }',
          default: '-',
          description: `提示内容模板上下文数据。`,
          description_en: `Popover content template context data.`,
        },
        {
          attribute: 'lvPopoverZIndex',
          type: 'number',
          default: '-',
          description: `层级。`,
          description_en: `Levels.`,
        },
        {
          attribute: 'lvPopoverBeforeOpen',
          type: 'fn',
          default: '-',
          description: `打开气泡卡片前的回调函数，执行异步事件时promise，返回值为false可阻止打开。`,
          description_en: `Open the callback function before the popover card, perform the asynchronous event when the promise, return value is false to prevent opening.`,
        },
        {
          attribute: 'lvPopoverBeforeClose',
          type: 'fn',
          default: '-',
          description: `关闭气泡卡片前的回调函数，执行异步事件时promise，返回值为false可阻止关闭。`,
          description_en: `Close the callback function before the popover card, perform the asynchronous event when the promise, the return value is false to prevent the closure.`,
        },
      ],
      event: [
        {
          event: 'lvPopoverExternalTrigger',
          parameter: `--`,
          description: '点击气泡卡片外部区域回调函数。',
          description_en: 'Click the popover card outer area callback function.',
        },
      ],
    },
  ],
};
